<!-- OpenCV.js快速入门指南 https://blog.csdn.net/jm_12138/article/details/122910737 -->
<!-- OpenCV.js官方文档 https://docs.opencv.org/4.5.5/d0/d84/tutorial_js_usage.html -->
<!-- OpenCV.js官方文档 模板匹配 https://docs.opencv.org/4.5.5/d8/dd1/tutorial_js_template_matching.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>opencv使用——模板匹配——官网示例</title>
    <!-- <script src='https://docs.opencv.org/版本号/opencv.js'></script> -->
    <!-- OpenCV.js 4.5.5 版本 -->
    <!-- <script src='https://docs.opencv.org/4.5.5/opencv.js'></script> -->

    <!-- <script src='./opencv_4.5.5.js' type="module"></script> -->

    <!-- You may want to load opencv.js asynchronously by async attribute in <script> tag. To be notified when opencv.js is ready, you can register a callback to onload attribute. -->
    <script src="./9_def_rune_tool_2/common/utils/my_opencv_fun.js"></script>
    <script async src="./opencv_4.5.5.js" onload="openCvReady()" type="text/javascript"></script>

    <canvas id="imageCanvasInput" width="400" height="400"></canvas>
    <canvas id="canvasOutput" width="400" height="400"></canvas>
    <hr />
    <!-- <canvas id="templateCanvasInput" width="70" height="70"></canvas> -->
    <canvas id="templateCanvasInput" width="140" height="140"></canvas>

</head>

<body>
    <!-- <script type="module">
        import * as cv from './opencv_4.5.5.js';
        console.log(cv);
    </script> -->
    <script>
        // console.log("xxx", window.$mocvf);
        async function openCvReady() {
            // 脚本加载完成
            // console.log(cv);
            // opencv.js 在真正初始化之前加载并触发 onload 事件。为了等到 opencv.js 真正准备好，opencv.js 提供了一个挂机“onRuntimeInitialized”。像这样使用它：

            // var img1 = new Image();
            // img.crossOrigin = 'anonymous';
            // img1.src = './img1.png';
            console.log(1);

            // var src1 = "./img1.png";
            // var src2 = "./img2.png";

            var src1 = "./icons.png";
            // var src2 = "./icon.png";
            var src2 = "./icon_l.png";
            await Promise.all([await loadImg(src1).then(img1 => {
                // console.log(img1);
                var canvas1 = document.getElementById('imageCanvasInput');
                var ctx1 = canvas1.getContext('2d');
                // img1.onload = function () {
                //     ctx1.drawImage(img1, 0, 0);
                // }
                ctx1.drawImage(img1, 0, 0);


                var canvas3 = document.getElementById('canvasOutput');
                var ctx3 = canvas3.getContext('2d');
                ctx3.drawImage(img1, 0, 0);

                console.log(12);
            }), await loadImg(src2).then(img2 => {
                // console.log(img2);
                var canvas2 = document.getElementById('templateCanvasInput');
                var ctx2 = canvas2.getContext('2d');
                ctx2.drawImage(img2, 0, 0);
                console.log(13);
            })]);

            console.log(2);
            cv['onRuntimeInitialized'] = () => {
                console.log(3);
                // do all your work here
                let src = cv.imread('imageCanvasInput');
                let templ = cv.imread('templateCanvasInput');
                let dst = new cv.Mat();
                let mask = new cv.Mat();

                // We use the function: cv.matchTemplate (image, templ, result, method, mask = new cv.Mat())

                // Parameters
                // image	image where the search is running. It must be 8-bit or 32-bit floating-point.
                // templ	searched template. It must be not greater than the source image and have the same data type.
                // result	map of comparison results. It must be single-channel 32-bit floating-point.
                // method	parameter specifying the comparison method(see cv.TemplateMatchModes).
                // mask	mask of searched template. It must have the same datatype and size with templ. It is not set by default.

                // cv.matchTemplate(src, templ, dst, cv.TM_CCOEFF, mask);
                // cv.matchTemplate(src, templ, dst, cv.TM_SQDIFF_NORMED, mask);


                // cv.matchTemplate(src, templ, dst, cv.TM_CCOEFF_NORMED, mask);

                let drawSrc = cv.imread('imageCanvasInput').clone();
                let res = window.$mocvf.scaleSearch(src, templ, dst, mask, {
                    similarity: 60,
                    range: [{
                        w: 80,
                        h: 80
                    }, {
                        w: 50,
                        h: 50
                    }],
                    step: {
                        w: 2
                    },
                    // drawSrc
                });
                cv.imshow('imageCanvasInput', drawSrc);

                console.log(res);
                let color = new cv.Scalar(255, 0, 0, 255);

                // let result = cv.minMaxLoc(dst, mask);
                // let maxPoint = result.maxLoc;
                // let point = new cv.Point(maxPoint.x + templ.cols, maxPoint.y + templ.rows);
                // cv.rectangle(src, maxPoint, point, color, 2, cv.LINE_8, 0);
                cv.rectangle(src, res.match_rect_data_loc, res.match_rect_data_point, color, 2, cv.LINE_8, 0);
                cv.imshow('canvasOutput', src);
                src.delete();
                dst.delete();
                mask.delete();
            };




        }

        function loadImg(url) {
            return new Promise((resolve, reject) => {
                let img = new Image();
                // img.crossOrigin = ''; 
                // img.crossOrigin = 'anonymous';
                // 跨域 直接用live server运行 或者使用webview打开
                img.src = url;
                img.onload = () => {
                    resolve(img);
                };
                img.onerror = reject;
            });
        }
    </script>
</body>

</html>